<template>
  <div class="recommend">
    <div
      v-for="(item, index) in recommendList.slice(0, 4)"
      :key="index"
      class="recommend-item"
    >
      <a href="/detail" @click.prevent="goDetail(item)">
        <img :src="item.pic" alt="item.description" />
        <div>{{ item.pname }}</div>
      </a>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  props: {
    recommendList: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const router = useRouter();
    const goDetail = (item) => {
      router.push({
        path: "/detail",
        query: JSON.stringify(item),
      });
    };
    return {
      goDetail,
    };
  },
};
</script>

<style scoped>
.recommend {
  display: flex;
  width: 100%;
  text-align: center;
  padding: 15px 0 30px;
  border-bottom: 8px solid #eee;
  font-size: 12px;
}
.recommend-item {
  flex: 1;
  img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
}
</style>
